<template>
  <!-- #ifdef H5 -->
  <view class=" bg_F5F5F5 flex flex-column align-center pageHeight"
        style="transform: translateZ(0);height: 100vh;overflow: hidden;">
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="wh_750 bg_F5F5F5 flex flex-column align-center pageHeight"
          style="overflow: hidden;transform: translateZ(0);height: 100vh;">
      <!-- #endif -->
      <s-header-title ref="headerTitle" isDisplayBack :title="page.options.name ? page.options.name : '家谱详情'"
                      :titleColor="page.current == 1 ? 'transparent':'#000000'" :is-fixed="page.current != 1"
                      :background="page.current == 1 ? 'transparent':'#FFFFFF'" @getPageHeight="getPageHeight"
                      zIndex="10"
                      :class="page.is_hidden_header ? 'hidden_header' : ''">
        <template #default>
          <!-- #ifdef MP-WEIXIN -->
          <view class="fs_24 color_FFFFFF bg_FF4206 fw_500"
                style="padding: 5rpx 20rpx;position: absolute;left: 68rpx;top: 50%;transform: translateY(-50%);border-radius: 24rpx"
                @click="searchPopup = true"
          >
            <!-- #endif -->
            <!-- #ifndef MP-WEIXIN -->
            <view class="fs_24 color_FFFFFF bg_FF4206 fw_500"
                  style="padding: 5rpx 20rpx;position: absolute;right: 23rpx;top: 50%;transform: translateY(-50%);border-radius: 24rpx"
                  @click="searchPopup = true"
            >
              <!-- #endif -->
              搜索
            </view>
        </template>
      </s-header-title>
      <view :style="{height:page.headerHeight+'px'}" v-if="page.current != 1"></view>
      <!-- 树谱 -->
      <!-- #ifdef H5 -->
      <view style="width: 100%" v-show="page.current == 0">
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="wh_750" v-show="page.current == 0" style="position: relative">
          <!-- #endif -->
          <movable-area :style="{
                      height: `calc(100vh - ${page.headerHeight}px - 130rpx)`
                    }" @touchmove.stop style="width: 100%;">
            <view style="position: absolute;left: 0;z-index: 5;"
                  v-if="locationInformation.listHeight > 0"
                  :style="{
                    top:`${locationInformation.theFirstGeneration - page.headerHeight }px`,
                    height: `${locationInformation.listHeight}px`
                  }"
                  class="flex flex-column align-center justify-around"
            >
              <view
                class="wh_30 hW_80 fs_20 fw_500 color_FFFFFF flex align-center justify-center shidai_list"
                style="border-radius: 8rpx"
                v-for="(item,index) in currentShi" :key="index">
                <view style="text-align: center" :style="{
                    width:item.shi_cn.length <= 2 ? '20rpx' : item.shi_cn.length <= 3 ? '16rpx' : item.shi_cn.length <= 4 ? '12rpx' :  '10rpx',
                    fontSize:item.shi_cn.length <= 2 ? '20rpx' : item.shi_cn.length <= 3 ? '16rpx' : item.shi_cn.length <= 4 ? '12rpx' :  '10rpx'
                  }">{{ item.shi_cn }}
                </view>
              </view>
            </view>
            <movable-view :style="{
                      height: `calc(100vh - ${page.headerHeight}px - 130rpx)`
                    }" style="width: 100%;" :scale="true" :scale-min="0.5" :scale-max="1" :friction="1" :damping="200"
                          @scale="outerScaling" @click.stop="movableClick">
              <!--  家谱视图  -->
              <!-- #ifdef MP-WEIXIN -->
              <movable-area id="movableArea" class="wh_750" :style="{
                      height: `calc(100vh - ${page.headerHeight}px - 130rpx)`
                    }" :scale-area="true">
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN -->
                <movable-area id="movableArea" style="width: 100%;" :style="{
                      height: `100%`
                    }">
                  <!-- #endif -->
                  <!-- #ifdef MP-WEIXIN -->
                  <movable-view id="movableView" class="flex align-center justify-center"
                                direction="all" :x="movable.x" :y="movable.y" :scale="true"
                                :scale-value="movable.scaleValue" :scale-min="1" :scale-max="10"
                                :out-of-bounds="false" :style="{
                        minWidth: movable.movableViewInfo.width > getPx(750) ? `${movable.movableViewInfo.width + getPx(500)}px` : `1150rpx`,
                        height: movable.movableViewInfo.height > systemInfo.windowHeight - page.headerHeight - getPx(130) ? `${movable.movableViewInfo.height}px` : `calc(100vh - ${page.headerHeight}px - 130rpx)`
                      }" :animation="false" :damping="50" :friction="4" inertia @scale="genealogicalScaling"
                                @change="movableViewChange" @click.stop="movableClicks">
                    <!-- #endif -->
                    <!-- #ifndef MP-WEIXIN -->
                    <movable-view id="movableView" class="flex align-center justify-center"
                                  direction="all" :x="movable.x" :y="movable.y" :out-of-bounds="false" :style="{
                        minWidth: movable.movableViewInfo.width > getPx(750) ? `${movable.movableViewInfo.width + getPx(500)}px` : `1150rpx`,
                        height: movable.movableViewInfo.height > systemInfo.windowHeight - page.headerHeight - getPx(130) ? `${movable.movableViewInfo.height}px` : `calc(100vh - ${page.headerHeight}px - 130rpx)`
                      }" :animation="false" :damping="50" :friction="4" inertia @scale="genealogicalScaling"
                                  @change="movableViewChange" @click.stop="movableClicks">
                      <view id="recursiveList" :style="{
                              transform: `scale(${state.zoomRatio})`
                            }">
                        <!-- #endif -->
                        <!-- #ifdef H5 -->
                        <keep-alive>
                          <!-- #endif -->
                          <!-- #ifndef H5 -->
                          <h5_recursive_list :children="genealogicalInformation.genealogist"
                                             :dynamicPage="page.dynamicPage"></h5_recursive_list>
                          <!-- #endif -->
                          <!-- #ifdef H5 -->
                          <recursive-list id="recursiveList" :style="setTran()"
                                          :children="genealogicalInformation.genealogist" isTopLevel
                                          :is_create="genealogicalInformation.familyMemberInfo.is_create"
                                          :is_init="genealogicalInformation.familyMemberInfo.is_init"
                                          :generation="0"
                                          :is_simple="genealogicalInformation.familyMemberInfo.is_simple"
                                          :show_die_gray="genealogicalInformation.familyMemberInfo.show_die_gray"
                                          :genealogicalHead="page.genealogicalHead"
                                          :center-id="state.center_id"
                                          :zibei_List="genealogicalInformation.generationList"
                                          :listHeight="locationInformation.listHeight"
                                          :is_first="page.isFirst"
                                          :options="page.options"
                                          :center_list="genealogicalInformation.familyMemberInfo.center_list"
                                          :all_count="genealogicalInformation.familyMemberInfo.all_count"
                                          :treeInfo="treeInfo"
                                          :dynamicPage="page.dynamicPage"
                                          @openAddPersonnelPopup="openAddPersonnelPopup" @clickAdd="clickAdd"
                                          @transmitCoordinate="transmitCoordinate"
                          />
                          <!-- #endif -->
                          <!-- #ifdef H5 -->
                        </keep-alive>
                        <!-- #endif -->
                        <!-- #ifndef MP-WEIXIN -->
                      </view>
                      <!-- #endif -->
                    </movable-view>
                </movable-area>
            </movable-view>
          </movable-area>
          <view class="management z_10">
            <view class="wh_125 hW_60 flex align-center justify-center bg_FFFFFF mb_12"
                  style="border-radius: 36rpx"
                  @click.stop="sheep.$router.go('/pages/public/richtext',{id:13,title:'树谱说明'})"
                  v-if="page.treeSpectrumDescription">
              <view class="fs_22 fw_500 color_4B4B4B">树谱说明</view>
              <text class="iconfont icon-ic_close fs_22 color_4B4B4B ml_5"
                    @click.stop="page.treeSpectrumDescription = false"></text>
            </view>
            <!--            &lt;!&ndash; #ifdef H5 || APP-PLUS &ndash;&gt;-->
            <!--            <view class="wh_125 hW_60 flex align-center justify-center bg_FFFFFF mb_12"-->
            <!--                  style="border-radius: 36rpx"-->
            <!--                  @click.stop="exportTree"-->
            <!--            >-->
            <!--              <view class="fs_37 fw_500 color_4B4B4B">导出</view>-->
            <!--            </view>-->
            <!--            &lt;!&ndash; #endif &ndash;&gt;-->
            <view class="flex align-center">
              <view class="wh_125 hW_60 flex align-center justify-center bg_FFFFFF"
                    style="border-radius: 36rpx" @click.stop="goGenealogicalManagement">
                <view class="fs_37 fw_500 color_4B4B4B">管理</view>
              </view>
              <image class="wh_28 hW_28 ml_15" :src="`${IMG_URL}/index/genealogy_center_icon.png`"
                     @click.stop="centralPointFun"></image>
            </view>
          </view>
          <view style="position: fixed;bottom:115rpx;right: 12rpx" class="fs_20 color_9F9F9F fw_500 flex align-center">
            <view class="managementNum mt_5">
              人数{{ genealogicalInformation.familyMemberInfo.all_count }}
              男{{ genealogicalInformation.familyMemberInfo.male }}
              女{{ genealogicalInformation.familyMemberInfo.woman }}
            </view>
            <view class="flex align-center ml_10">
              <view class="hW_60 flex align-center justify-center bg_FFFFFF"
                    style="border-radius: 36rpx;padding: 5rpx 15rpx" @click.stop="viewAll"
                    v-if="genealogicalInformation.familyMemberInfo.all_count <= personLimit">
                <view class="fs_37 fw_500 color_4B4B4B">查看全部</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 册谱 -->
        <view class="canonization" :style="{
            height:`calc(100vh)`,
          }" v-if="page.current == 1">
          <view class="flex" :style="{height:`calc(100vh)`}" v-if="page.successFlag">
            <CanonizationComponents ref="canonizationComponents" :list="page.canonizationList"
                                    style="width: 100%;" :backgroouond="page.canonizationBg"
                                    :genealogy_id="page.options.id"
                                    :children="treeInfoV3"
            >
            </CanonizationComponents>
          </view>
        </view>
        <view class="management z_10" v-if="page.current == 1 && !page.is_hidden">
          <view class="wh_125 hW_60 flex align-center justify-center bg_FFFFFF mb_12"
                style="border-radius: 36rpx"
                @click.stop="sheep.$router.go('/pages/public/richtext',{id:14,title:'册谱说明'})"
                v-if="!!page.albumDescription">
            <view class="fs_22 fw_500 color_4B4B4B">册谱说明</view>
            <text class="iconfont icon-ic_close fs_22 color_4B4B4B ml_5"
                  @click.stop="page.albumDescription = false"></text>
          </view>
          <view class="wh_125 hW_60 flex align-center justify-center bg_FFFFFF" style="border-radius: 36rpx"
                @click.stop="sheep.$router.go('/pages/canonization/manage',{ id: page.options.id })">
            <view class="fs_37 fw_500 color_4B4B4B">管理</view>
            <!--        <image :src="`${IMG_URL}/index/wechat_genealog_edit.png`" class="wh_34 hW_34 ml_5"></image>-->
          </view>
        </view>
        <scroll-view class="ancestralHall" scroll-y="true" :style="{
            height:`calc(100vh - ${page.headerHeight}px)`,
            top:`${page.headerHeight}px`
          }" v-show="page.current == 2">
          <anniversaries ref="anniversaries" :options="page.anniversariesOptions"></anniversaries>
        </scroll-view>
        <view class="ancestralHall" :style="{
            height:`calc(100vh - ${page.headerHeight}px)`,
            top:`${page.headerHeight}px`
          }" v-show="page.current == 3">
          <scroll-view class="ancestralHall_scrollView" :scroll-y="true">
            <view class="all">
              <view class="ancestralHall_column flex justify-center align-center"
                    v-for="(item,index) in listOfAncestralTemplesHandle" :key="index">
                <view class="ancestralHall_row" @click.stop="goToAncestralHall(item1)"
                      v-for="(item1,index1) in listOfAncestralTemplesHandle[index]" :key="index1">
                  <image :src="`${IMG_URL}/index/lingpai.png`"></image>
                  <view class="ancestralHall_row_name" v-if="!!item1 && !!item1.username">
                    {{ item1.username }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="genealogicalDetails_bottom wh_750 flex justify-center z_10" :style="{
            background:page.current == 1? 'transparent' : '#FFFFFF'
          }" :class="page.is_hidden ? 'hidden_all':'show_all'">
          <view class="flex align-center justify-evenly wh_750">
            <view v-for="(item,index) in page.tabList" :key="index" class="flex flex-column mb_20"
                  :class="page.current == index ? 'activeStyle' : 'inactiveStyle'"
                  @click.stop="onTabsChange(index)">
              <view>{{ item.name }}</view>
            </view>
          </view>
        </view>
        <!--  添加家谱成员（未有一个成员时）  -->
        <first_popup ref="addFamilyMemberPopUp">
          <template #content>
            <view class="flex flex-column align-center">
              <view class="familyMemberPopUp flex flex-column align-center">
                <view class="familyMemberPopUp_title mt_45">
                  <view class="familyMemberPopUp_title_name">
                    请选择性别
                  </view>
                </view>
                <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`">
                </image>
              </view>
              <view class="hW_110"></view>
              <view class="genealogicalDetails_avatarList flex align-center z_10 wh_410 justify-around">
                <view class="genealogicalDetails_avatarList_list flex flex-column align-center" :style="{
                  background:item.sex == 0? '#FC6F6F':'#6FA0FC'
                }" v-for="(item,index) in genealogicalInformation.defaultAvatar" :key="index"
                      @click.stop="goSetGenealogy(item)">
                  <view class="avatar">
                    <image :src="`${nc_image}${item.avatar}`" class="images"></image>
                  </view>
                  <view class="name">
                    {{ item.sex == 1 ? '男' : '女' }}
                  </view>
                </view>
              </view>
              <view class="hW_117"></view>
              <view class="familyMemberPopUp_close flex align-center justify-center z_10"
                    @click.stop="closeaFamilyMemberPopUp">
                取消
              </view>
              <view class="hW_47"></view>
            </view>
          </template>
        </first_popup>
        <!-- 个人卡片详情 -->
        <add-personnel-popup ref="addPersonnelPopup" :addPersonnelInfo="popup.addPersonnelInfo"
                             :options="page.options" :center-id="state.center_id" @addRelation="addRelation"
                             :isBindGenealogys="isBindGenealogys"
                             @shiftUp="shiftUp"
                             @reset="reset"
                             @setCenter="setCenter" @refresh="refresh"></add-personnel-popup>
        <!-- 选择人员弹窗 -->
        <SelectPeoplePopupWindow ref="selectPeoplePopupWindowFlag"
                                 :relationshipsThatCanBeAdded="selectInfo.relationshipsThatCanBeAdded"
                                 :addPersonnelInfo="popup.addPersonnelInfo"
                                 @addMember="addMember"></SelectPeoplePopupWindow>
        <!-- #ifndef H5 -->
        <s-share-floating-window mode="left" ref="shareFloatingWindow" :is-family="false" :index="2"
                                 v-if="page.current == 0"
                                 @shareFriendsAndFamily="shareFriendsAndFamily"></s-share-floating-window>
        <!-- #endif -->


        <uni-popup ref="shareAddPer">
          <view class="wh_661 hW_734 flex flex-column align-center justify-between shareAddPer"
                style="border-radius: 44rpx;position: relative;overflow: hidden">
            <view class="flex align-center flex-column">
              <image class="wh_32 hW_32" style="position: absolute;right: 20rpx;top: 20rpx;"
                     :src="`${IMG_URL}/index/jiatingjizhangben_icon_close.png`" @click.stop="closeAddPer">
              </image>
              <view class="mt_20 fs_48 fw_500 color_AB6822 wh_621">添加人数上限</view>
              <view class="fs_28 fw_500 color_AB6822 mt_60 ml_24 mr_24 flex flex-column align-center">
                <view>
                  请分享到
                  <text class="color_FF4206">微信家人群</text>
                </view>
                <view>
                  可获得10个添加人数
                </view>
              </view>
              <!-- #ifdef H5 -->
              <view
                class="mt_20 wh_334 hW_101 flex flex-column align-center justify-center fs_37 color_FFFFFF fw_500"
                style="border-radius: 51rpx;background: linear-gradient( 270deg, #FF4206 0%, #FFB29A 100%);overflow: hidden"
                @click.stop="appShare">
                <view>立即分享</view>
                <!--            <view class="fs_27 mt_2">(10个/次)</view>-->
              </view>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view
                class="mt_20 wh_334 hW_101 flex flex-column align-center justify-center fs_37 color_FFFFFF fw_500"
                style="border-radius: 51rpx;background: linear-gradient( 270deg, #FF4206 0%, #FFB29A 100%);overflow: hidden"
                @click.stop="appShare">
                <view>立即分享</view>
                <!--            <view class="fs_27 mt_2">(10个/次)</view>-->
              </view>
              <!-- #endif -->
              <!-- #ifdef MP-WEIXIN -->
              <button
                class="mt_20 wh_334 hW_101 flex flex-column align-center justify-center fs_37 color_FFFFFF fw_500"
                style="border-radius: 51rpx;background: linear-gradient( 270deg, #FF4206 0%, #FFB29A 100%);overflow: hidden"
                open-type="share">
                <view>立即分享</view>
                <!--            <view class="fs_27 mt_2">(10个/次)</view>-->
              </button>
              <!-- #endif -->
            </view>
            <view class="wh_680 hW_340 mt_29 people_vip_popup_padding flex align-center flex-column">
              <view class="fs_28 fw_500 color_AB6822 mt_40 ml_24 mr_24 flex flex-column align-center">
                <view>请开通
                  <text class="color_FF4206">拾亲VIP会员</text>
                </view>
                <view>可获得99999个添加人数</view>
              </view>
              <view
                class="mt_20 wh_334 hW_101 flex flex-column align-center justify-center fs_37 color_FFFFFF fw_500"
                style="border-radius: 51rpx;background: linear-gradient( 270deg, #FF4206 0%, #FFB29A 100%);overflow: hidden"
                @click.stop="liberalVip">
                <view>
                  10元 立即开通
                </view>
                <!--            <view class="fs_27 mt_2">-->
                <!--              无限人数-->
                <!--            </view>-->
              </view>
            </view>
          </view>
        </uni-popup>

        <!-- #ifdef H5 -->
        <view v-if="page.showShareGuide" class="guide-wrap" @click.stop="page.showShareGuide = false">
          <image class="guide-image"
                 :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"></image>
        </view>
        <!-- #endif -->

        <s-popup-vip :show="vipDisposition.isShow" @closePopup="closePopup">
          <template #default>
            <view class="memberPopup position-relative"
                  v-if="!!vipDisposition.goodDetails && vipDisposition.goodDetails != {}">
              <image class="w-100 h-100" :src="`${nc_image_path}/nc_vip_banner.png`"></image>
              <view class="exchange flex align-center justify-between">
                <view class="flex align-end" v-if="!!vipDisposition.goodDetails.price">
                  <text>￥</text>
                  <text class="fs_60"
                        style="line-height: 60rpx">{{ vipDisposition.goodDetails.price[0] }}
                  </text>
                </view>
                <view @click.stop="exchangeImmediately" v-if="mp_code != appVersion">
                  兑换
                </view>
              </view>
              <view class="chatDetail fs_26 fw_500" style="color: #FDD07F"
                    @click.stop="sheep.$router.go('/pages/public/richtext',{id:4,title:'会员权益'})">
                查看详情
              </view>
              <view class="button_vip flex flex-row align-center justify-center"
                    @click.stop="purchaseMembership">
                立即开通
              </view>
            </view>
          </template>
        </s-popup-vip>

        <s-image-preview ref="imagePreview"></s-image-preview>

        <!-- 搜索 -->
        <su-popup :show="searchPopup" type="top" @close="closeSearchPopup()">
          <view>
            <!-- #ifndef MP-WEIXIN -->
            <view :style="{height:sheep.$platform.device.statusBarHeight + 'px'}"></view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view :style="{height:sheep.$platform.capsule.height + 'px'}"></view>
            <!-- #endif -->
            <view :style="{height:sheep.$platform.device.statusBarHeight + 'px'}"></view>
            <view class="wh_750 hW_500 flex flex-column align-center" style="margin: 0 auto">
              <view class="wh_750 flex align-center" style="padding: 20rpx 0">
                <view class="flex-sub flex align-center bg_F5F5F5 fs_32 mr_30 ml_23"
                      style="padding: 10rpx 20rpx;border-radius: 12rpx">
                  <view class="iconfont icon-ic_search color_4B4B4B"></view>
                  <input v-model="searchValue" placeholder="请输入搜索的人名" class="flex-sub ml_20 fs_28 fw_500"
                         @confirm="searchMember"></input>
                </view>
                <view class="fs_24 fw_500 color_FFFFFF mr_23"
                      style="cursor:pointer;padding:10rpx 15rpx;background: #FF440A;border-radius: 12rpx;"
                      @click.stop="searchMember"
                >
                  {{ !!searchValue ? '搜索' : '取消' }}
                </view>
              </view>
              <view class="wh_750 hW_2" style="background: #E5E5E5"></view>
              <view class="wh_750 flex-sub" style="position: relative">
                <view style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;">
                  <view v-if="searchList.length <= 0"
                        style="width: 100%;height: 100%;"
                        class="fs_30 fw_500 color_4B4B4B flex align-center justify-center"
                  >
                    暂无内容
                  </view>
                  <scroll-view v-else scroll-y="true" style="width: 100%;height: 100%;">
                    <view style="width: 100%;" class="flex align-center flex-column">
                      <view v-for="(item,index)  in searchList"
                            :key="index"
                            style="width: 92%;background: #F8FAFB;border-radius: 12rpx;padding: 10rpx 0;cursor:pointer;"
                            class="mt_15 flex align-center"
                            hover-class="search_hover"
                            @click.stop="jumpMember(item)"
                      >
                        <view class="ml_23 fs_24 fw_500 color_4B4B4B">
                          {{ item.name }}
                        </view>
                        <view class="ml_10 fs_24 fw_500 color_4B4B4B">
                          【第{{ item.shi }}世】
                        </view>
                      </view>
                      <view class="hW_50"></view>
                    </view>
                  </scroll-view>
                </view>
              </view>
            </view>
          </view>
        </su-popup>

        <!-- 中心点提示 -->
        <su-popup :show="centralPointFlag" type="center" backgroundColor="transparent" @close="closeCentralPointFlag()">
          <view class="wh_574 flex flex-column align-center"
                style="background:linear-gradient( 137deg, #FFB29A 0%, #FF7950 100%);border-radius: 20rpx 20rpx 20rpx 20rpx;padding: 15rpx 20rpx">
            <view class="flex align-center" style="width: 100%;">
              <text class="iconfont icon-ic_tip1 fs_26 fw_500 color_FFFFFF"></text>
              <view class="fs_26 fw_500 color_FFFFFF ml_10">提示</view>
            </view>
            <view class="fs_30 fw_500 color_FFFFFF mt_20" style="width: 100%;">
              已设置中心点
            </view>
            <view class="fs_30 fw_500 mt_30 mb_30 flex align-center justify-center"
                  style="color: #363636;background: rgba(254,175,151,.8);width: 80%;padding: 20rpx 0;border-radius: 12rpx"
            >
              {{ treeInfo.center_data.surname || ''
              }}{{ treeInfo.center_data.name || '' }}
              【第{{ treeInfo.center_data.shi_cn || '' }}世】
            </view>
            <view class="fs_30 fw_500 color_FFFFFF mt_10" style="width: 100%;">
              中心点在当前人下，是否跳转
            </view>
            <view class="fs_30 fw_500 mt_30 mb_30 flex align-center justify-center"
                  style="color: #363636;background: rgb(255,255,255);width: 80%;padding: 20rpx 0;border-radius: 12rpx"
            >
              {{ page.centerInfo.surname || '' }}{{ page.centerInfo.name || '' }}
              【第{{ page.centerInfo.shi_cn || '' }}世】
            </view>
            <view class="flex align-center justify-around mt_10 mb_30"
                  style="width: 75%;"
            >
              <view class="bg_FFFFFF fs_32 fw_bold"
                    style="color: #FF7950;padding: 10rpx 50rpx;border-radius: 30rpx;cursor:pointer;"
                    @click.stop="jumpMember(treeInfo.center_data)"
              >
                确定
              </view>
              <view class="fs_32 fw_bold"
                    style="color: #FFFFFF;background: rgba(254,175,151,.8);padding: 10rpx 50rpx;border-radius: 30rpx;cursor:pointer;"
                    @click.stop="closeCentralPointFlag"
              >
                取消
              </view>
            </view>
          </view>
        </su-popup>


        <!-- #ifdef H5 || APP-PLUS -->
        <image-export :is_derive="page.is_derive"></image-export>
        <!-- #endif -->
      </view>
</template>

<script setup>
  import {
    computed,
    getCurrentInstance,
    nextTick,
    onMounted,
    reactive,
    ref,
    watch,
  } from 'vue';
  import {
    onLoad,
    onShow,
    onReady,
    onUnload,
    onHide,
    onShareAppMessage,
    onBackPress,
  } from '@dcloudio/uni-app';
  import RecursiveList from '@/pages/genealogy/components/RecursiveList.vue';
  import sheep from '@/sheep';
  import First_popup from '@/pages/genealogy/components/first_popup.vue';
  import AddPersonnelPopup from '@/pages/genealogy/components/addPersonnelPopup.vue';
  import SelectPeoplePopupWindow from '@/pages/genealogy/components/selectPeoplePopupWindow.vue';
  import CanonizationComponents from '@/pages/genealogy/components/canonizationComponents.vue';
  import {
    h5_url,
  } from '@/sheep/config';
  import SPopupVip from '@/sheep/components/s-popup-vip/s-popup-vip.vue';
  import Anniversaries from '@/pages/genealogy/components/anniversaries.vue';
  import SImagePreview from '@/sheep/components/s-image-preview/s-image-preview.vue';
  import dayjs from 'dayjs';
  import ImageExport from '@/pages/genealogy/components/imageExport.vue';
  // #ifdef H5
  import H5_recursive_list from '@/pages/genealogy/components/h5_recursive_list.vue';
  // #endif

  const {
    proxy,
  } = getCurrentInstance();
  const state = reactive({
    center_id: 0,
    zoomRatio: 1,
  });
  const currentShi = computed(() => {
    if (!treeInfo.value.currentShi) {
      return [];
    } else {
      return treeInfo.value.currentShi;
    }
  });
  const systemInfo = computed(() => sheep.$platform.device);
  // 人数限制
  // #ifdef H5
  const personLimit = computed(() => {
    if (sheep.$store('app').mode == 'H5') {
      return Number(sheep.$store('app').info.h5_user_num);
    } else {
      return Number(sheep.$store('app').info.pc_user_num);
    }
  });
  // #endif
  // #ifdef APP-PLUS
  const personLimit = computed(() => {
    if (sheep.$platform.device.platform.toLowerCase() === 'ios') {
      return Number(sheep.$store('app').info.ios_user_num);
    } else {
      return Number(sheep.$store('app').info.android_user_num);
    }
  });
  // #endif
  // #ifdef MP-WEIXIN
  const personLimit = computed(() => Number(sheep.$store('app').info.mini_user_num));
  // #endif
  const page = reactive({
    // 动态页面参数
    dynamicPage: 1,
    is_derive: false,
    headerHeight: 0,
    options: {},
    current: 0,
    tabList: [
      {
        name: '树谱',
        index: 0,
      },
      {
        name: '册谱',
        index: 1,
      },
      {
        name: '生日',
        index: 2,
      },
      {
        name: '纪念堂',
        index: 3,
      },
    ],
    isFirst: false,
    activeStyle: {
      color: 'rgb(255,66,6)',
      fontSize: '36rpx',
      fontWeight: 'bold',
    },
    inactiveStyle: {
      color: '#696969',
      fontSize: '36rpx',
      fontWeight: 'bold',
    },
    // #ifdef H5
    // 存储当前按下的Ctrl键状态
    ctrlKeyDown: false,
    // #endif
    genealogicalHead: {},
    // 是否停止渲染页面
    stopRendering: false,
    canonizationList: [],
    canonizationBg: '',
    is_hidden: false,
    is_hidden_header: false,
    addNotPage: false,
    // #ifdef H5
    showShareGuide: false,
    // #endif
    selfCoordinate: {},
    anniversariesOptions: {
      family_id: 0,
      is_flag: 3,
    },
    albumDescription: true,
    treeSpectrumDescription: true,
    successFlag: false,
    membership: [],
    // 开启树谱更改监听
    is_listen: false,
    // 是否添加成员
    is_add: false,
    centerInfo: {},
    treeList: new Map(),
    // 是否导出树谱
    exportOrNot: false,
  });
  const vipDisposition = reactive({
    isShow: false,
    goodDetails: {},
  });
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const version = computed(() => sheep.$store('AI').version);
  const appVersion = computed(() => sheep.$store('app').info.worship_version);
  const movable = reactive({
    x: 0,
    y: 0,
    scaleValue: 2,
    movableViewInfo: {
      width: 0,
      height: 0,
    },
    rpx: 750 / systemInfo.value.windowWidth,
    // 缩放之后的值
    scaleValueAfter: 1,
  });
  const genealogicalInformation = reactive({
    genealogist: [],
    familyMemberInfo: {
      is_simple: 0,
    },
    defaultAvatar: [],
    generationList: [],
    changeFlag: false,
  });
  const selectInfo = reactive({
    genealogy_id: '',
    memberInfo: {},
    relationshipsThatCanBeAdded: [],
  });
  const member = reactive({
    memberInfo: {},
  });
  const popup = reactive({
    addPersonnelInfo: {},
  });
  const commemorate = reactive({
    listOfAncestralTemples: [],
  });
  const listOfAncestralTemplesHandle = computed(() => {
    let list = {};
    let arr = commemorate.listOfAncestralTemples;
    list['arr0'] = [];
    for (let i = 0; i < 2; i++) {
      list['arr0'].push(arr[i]);
    }
    list['arr1'] = [];
    for (let i = 2; i < 8; i++) {
      list['arr1'].push(arr[i]);
    }
    list['arr2'] = [];
    for (let i = 8; i < 16; i++) {
      list['arr2'].push(arr[i]);
    }
    list['arr3'] = [];
    for (let i = 16; i < 24; i++) {
      list['arr3'].push(arr[i]);
    }
    let num = (arr.length - 24) / 8;
    for (let i = 0; i < num; i++) {
      list['arr' + (i + 4)] = [];
      for (let j = 8 * (i + 2); j < 8 * (i + 4) + 8; j++) {
        list['arr' + (i + 4)].push(arr[j]);
      }
    }
    return list;
  });
  const getPx = (number) => {
    return uni.upx2px(number);
  };

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  let treeInfo = ref({});
  let treeInfoV3 = ref({});
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const locationInformation = reactive({
    x: 0,
    y: 0,
    theFirstGeneration: 0,
    listHeight: 0,
  });
  const shareAddPer = ref();
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);
  const anniversaries = ref();
  const centralPoint = reactive({
    x: 0,
    y: 0,
  });
  const imagePreview = ref();
  const isSetStatus = computed(() => sheep.$store('family').isSetStatus);
  let searchPopup = ref(false);
  let searchValue = ref('');
  let centralPointFlag = ref(false);
  // 搜索到的节点内容
  const searchList = ref([]);
  // 视图更新完之后的中心节点位置
  const centralPointInfo = reactive({
    left: 0,
    top: 0,
  });

  watch(isSetStatus, async (newVal) => {
    if (!!newVal) {
      await getGenealogyTree();
      await sheep.$store('family').setGenealogyTreeStatus(false);
    }
  }, {
    deep: true,
  });
  let isBindGenealogys = ref();
  onLoad(async (options) => {
    page.options = options;
    // 是否显示绑定
    const isBindGenealogy = await sheep.$api.genealogy.isBindGenealogy({
      genealogy_id: options.id,
    });
    isBindGenealogys.value = isBindGenealogy.data;
    page.dynamicPage = Number(page.options.dynamicPage || 1);
    uni.$on(`setMemberList${page.dynamicPage}`, async (index) => {
      page.membership.push(index);
      if (page.membership.length == genealogicalInformation.familyMemberInfo.all_count) {
        await uni.$emit('loadSuccess');
      }
    });
    uni.$on(`blowUp`, () => {
      page.is_hidden = !page.is_hidden;
      page.is_hidden_header = !page.is_hidden_header;
    });
    uni.showLoading({
      title: '加载中',
      mask: true,
    });
    // 更新视图宽度
    uni.$on(`changeWidth${page.dynamicPage}`, (flag = false) => {
      changeWidth(flag);
      setTimeout(() => {
        uni.$emit(`generationChange${page.dynamicPage}`);
      }, 10);
    });

    await getGenealogyTree();
    page.anniversariesOptions.family_id = page.options.id;
    let {
      data,
    } = await sheep.$api.family.getDefaultAvatar({
      type: 3,
    });
    genealogicalInformation.defaultAvatar = data;
    // #ifdef H5
    // 监听wheel事件
    document.addEventListener('wheel', handleWheel);
    // #endif

    uni.$on('unload', () => {
      uni.$off('blowUp');
      uni.$off(`changeWidth${page.dynamicPage}`);
      uni.$off('getCanonizationDetail');
      uni.$off('iosPay');
      uni.$off(`setCoordinate${page.dynamicPage}`);
      uni.$off('appShareMange');
      uni.$off('unload');
      uni.$off('setMemberList');
    });

    // #ifdef MP-WEIXIN
    uni.$on(`setCoordinate${page.dynamicPage}`, (info) => {
      console.log('info', info);
      nextTick(async () => {
        if (!!info.info) {
          console.log('info=>', info.info);
          page.selfCoordinate = info.info;
          if (page.selfCoordinate.left != 0) {
            uni.$emit(`closeAcquire${page.dynamicPage}`);
            movable.x = 0;
            movable.y = 0;
            page.isFirst = true;
            uni.hideLoading();
            setTimeout(() => {
              // #ifdef MP-WEIXIN
              movable.x = -info.info.left + sheep.$platform.device
                .screenWidth / 2;
              movable.y = -info.info.top + sheep.$platform.device
                .screenHeight / 2;
              centralPoint.x = -info.info.left + sheep.$platform.device
                .screenWidth / 2;
              centralPoint.y = -info.info.top + sheep.$platform.device
                .screenHeight / 2;
              // #endif
              // #ifndef MP-WEIXIN
              movable.x = -info.info.left + uni.getSystemInfoSync()
                .screenWidth / 2;
              movable.y = -info.info.top + uni.getSystemInfoSync()
                .screenHeight / 2;
              centralPoint.x = -info.info.left + uni
                .getSystemInfoSync().screenWidth / 2;
              centralPoint.y = -info.info.top + uni.getSystemInfoSync()
                .screenHeight / 2;
              // #endif
              uni.setStorageSync('locationInformation', {
                x: movable.x,
                y: movable.y,
              });
            }, 100);
            if (treeInfo.value.top_list.has_center != 1 && !!page.centerInfo && JSON.stringify(page.centerInfo) != '{}') {
              // 开启中心点提示
              centralPointFlag.value = true;
            }
          } else {
            setTimeout(() => {
              // setTimeout(() => {
              // jumpMember(obj.memberInfo);
              uni.$once('singleSearch', (res) => {
                setTimeout(() => {
                  // #ifdef MP-WEIXIN
                  movable.x = -res.info.left + sheep.$platform.device
                    .screenWidth / 2;
                  movable.y = -res.info.top + sheep.$platform.device
                    .screenHeight / 2;
                  centralPoint.x = -res.info.left + sheep.$platform.device
                    .screenWidth / 2;
                  centralPoint.y = -res.info.top + sheep.$platform.device
                    .screenHeight / 2;
                  // #endif
                  // #ifndef MP-WEIXIN
                  movable.x = -res.info.left + uni.getSystemInfoSync()
                    .screenWidth / 2;
                  movable.y = -res.info.top + uni.getSystemInfoSync()
                    .screenHeight / 2;
                  centralPoint.x = -res.info.left + uni
                    .getSystemInfoSync().screenWidth / 2;
                  centralPoint.y = -res.info.top + uni.getSystemInfoSync()
                    .screenHeight / 2;
                  // #endif
                  uni.setStorageSync('locationInformation', {
                    x: movable.x,
                    y: movable.y,
                  });
                }, 100);
              });
              uni.$emit(`memberModule_${info.memberInfo.id}`);
              if (treeInfo.value.top_list.has_center != 1 && !!page.centerInfo && JSON.stringify(page.centerInfo) != '{}') {
                // 开启中心点提示
                centralPointFlag.value = true;
              }
              // }, 10);
              // uni.$emit('setAvatar_genealogy');
            }, 200);
          }
        } else {
          setTimeout(() => {
            console.log('获取不到坐标', dayjs().format('HH:mm:ss'));
            movable.x = -info.res.left + sheep.$platform.device
              .screenWidth / 2;
            movable.y = -info.res.top + sheep.$platform.device
              .screenHeight / 2;
            uni.setStorageSync('locationInformation', {
              x: movable.x,
              y: movable.y,
            });
            page.isFirst = true;
            uni.hideLoading();
            // locationInformation.listHeight = info.res.height;
            // #ifdef APP-PLUS
            // setTimeout(() => {
            //   proxy.$forceUpdate();
            // }, 1000);
            // #endif
            uni.$off(`setCoordinate${page.dynamicPage}`);
          }, 50);
        }
      });
    });
    // #endif

  });

  onReady(async () => {
    // const res = await sheep.$api.genealogy.getGenealogyShi({
    //   genealogy_id: page.options.id,
    // });
    // genealogicalInformation.generationList = res.data;
    // #ifdef H5
    if (window.location.href.indexOf('?') > -1) {
      let params = window.location.href.split('?')[1];
      let paramsArr = params.split('&');
      let paramsObj = {};
      paramsArr.forEach((item) => {
        let itemArr = item.split('=');
        paramsObj[itemArr[0]] = itemArr[1];
      });
      if (paramsObj.dynamicPage) {
        page.dynamicPage = Number(paramsObj.dynamicPage);
      }
    }
    // #endif
    // #ifndef MP-WEIXIN
    uni.$on(`setCoordinate${page.dynamicPage}`, (info) => {
      console.log('info', info);
      nextTick(async () => {
        if (!!info.info) {
          console.log('info=>', info.info);
          page.selfCoordinate = info.info;
          if (page.selfCoordinate.left != 0) {
            uni.$emit(`closeAcquire${page.dynamicPage}`);
            movable.x = 0;
            movable.y = 0;
            page.isFirst = true;
            uni.hideLoading();
            setTimeout(() => {
              // #ifdef MP-WEIXIN
              movable.x = -info.info.left + sheep.$platform.device
                .screenWidth / 2;
              movable.y = -info.info.top + sheep.$platform.device
                .screenHeight / 2;
              centralPoint.x = -info.info.left + sheep.$platform.device
                .screenWidth / 2;
              centralPoint.y = -info.info.top + sheep.$platform.device
                .screenHeight / 2;
              // #endif
              // #ifndef MP-WEIXIN
              movable.x = -info.info.left + uni.getSystemInfoSync()
                .screenWidth / 2;
              movable.y = -info.info.top + uni.getSystemInfoSync()
                .screenHeight / 2;
              centralPoint.x = -info.info.left + uni
                .getSystemInfoSync().screenWidth / 2;
              centralPoint.y = -info.info.top + uni.getSystemInfoSync()
                .screenHeight / 2;
              // #endif
              uni.setStorageSync('locationInformation', {
                x: movable.x,
                y: movable.y,
              });
            }, 100);
            if (treeInfo.value.top_list.has_center != 1 && !!page.centerInfo && JSON.stringify(page.centerInfo) != '{}') {
              // 开启中心点提示
              centralPointFlag.value = true;
            }
          } else {
            setTimeout(() => {
              // setTimeout(() => {
              // jumpMember(obj.memberInfo);
              uni.$once('singleSearch', (res) => {
                setTimeout(() => {
                  // #ifdef MP-WEIXIN
                  movable.x = -res.info.left + sheep.$platform.device
                    .screenWidth / 2;
                  movable.y = -res.info.top + sheep.$platform.device
                    .screenHeight / 2;
                  centralPoint.x = -res.info.left + sheep.$platform.device
                    .screenWidth / 2;
                  centralPoint.y = -res.info.top + sheep.$platform.device
                    .screenHeight / 2;
                  // #endif
                  // #ifndef MP-WEIXIN
                  movable.x = -res.info.left + uni.getSystemInfoSync()
                    .screenWidth / 2;
                  movable.y = -res.info.top + uni.getSystemInfoSync()
                    .screenHeight / 2;
                  centralPoint.x = -res.info.left + uni
                    .getSystemInfoSync().screenWidth / 2;
                  centralPoint.y = -res.info.top + uni.getSystemInfoSync()
                    .screenHeight / 2;
                  // #endif
                  uni.setStorageSync('locationInformation', {
                    x: movable.x,
                    y: movable.y,
                  });
                }, 100);
              });
              uni.$emit(`memberModule_${info.memberInfo.id}`);
              if (treeInfo.value.top_list.has_center != 1 && !!page.centerInfo && JSON.stringify(page.centerInfo) != '{}') {
                // 开启中心点提示
                centralPointFlag.value = true;
              }
              // }, 10);
              // uni.$emit('setAvatar_genealogy');
            }, 200);
          }
        } else {
          setTimeout(() => {
            console.log('获取不到坐标', dayjs().format('HH:mm:ss'));
            movable.x = -info.res.left + sheep.$platform.device
              .screenWidth / 2;
            movable.y = -info.res.top + sheep.$platform.device
              .screenHeight / 2;
            uni.setStorageSync('locationInformation', {
              x: movable.x,
              y: movable.y,
            });
            page.isFirst = true;
            uni.hideLoading();
            // locationInformation.listHeight = info.res.height;
            // #ifdef APP-PLUS
            // setTimeout(() => {
            //   proxy.$forceUpdate();
            // }, 1000);
            // #endif
            uni.$off(`setCoordinate${page.dynamicPage}`);
          }, 50);
        }
      });
    });
    // #endif
    // 开启找不到人之后的坐标
    uni.$on('coordinateOpen', () => {
      nextTick(async () => {
        console.log(9);
        await changeWidth(true);
        // uni.$emit('vertexPosition');
      });
    });
    uni.$on('getCanonizationDetail', () => {
      getCanonizationDetail();
    });
    // 获取册谱详情
    await getCanonizationDetail();
    uni.$on('iosPay', () => {
      openVip();
    });
    const {
      data,
    } = await sheep.$api.goods.ids({
      ids: '10',
    });
    vipDisposition.goodDetails = data[0];
    page.stopRendering = true;
    console.log('数据加载完成=> success');
    await changeWidth();
    // 防止一直加载循环
    // uni.$emit('acquire');
    page.successFlag = true;
    nextTick(() => {
      uni.$on('showImagePreview', (obj) => {
        imagePreview.value.openPopup(obj);
      });
      uni.$on('hideImagePreview', () => {
        imagePreview.value.closePopup();
      });
    });
  });

  onShow(async () => {
    if (!!page.exportOrNot) {
      page.exportOrNot = false;
      await exportTree();
    }
    console.log('onShow', sheep.$store('family').memberInformation);
    if (!!sheep.$store('family').memberInformation && JSON.stringify(sheep.$store('family').memberInformation) != '{}') {
      let item = sheep.$store('family').memberInformation;
      await sheep.$store('family').setMemberInformation({});
      // #ifdef H5
      window.open(`${window.location.href.split('#')[0]}#/pages/genealogy/management?id=${page.options.id}&name=${page.options.name}-${item.surname + item.name}节点&add_time=${page.options.add_time}&username=${page.options.username}&is_firstScreen=true&member_id=${item.id}&is_confirm=true&dynamicPage=${page.dynamicPage + 1}`);
      // #endif
      // #ifndef H5
      phoneJump(item);
      // #endif
    }
    uni.$on(`setCenterInfo_${page.dynamicPage}`, (info) => {
      page.centerInfo = info;
    });
    uni.$on(`setTreeList_${page.dynamicPage}`, data => {
      if (data && data.memberInfo && data.memberInfo.id) {
        page.treeList.set(data.memberInfo.id, data.memberInfo);
      } else {
        console.error('Invalid data. Cannot add member info.');
      }
    });
    // #ifdef H5
    if (!!centralPointFlag.value && !!isMobile() && !page.is_add) {
      centralPointFlag.value = false;
      page.centerInfo = {};
      location.reload(true);
    } else {
      page.is_add = false;
    }
    // #endif
    if (mp_code.value == appVersion.value) {
      page.tabList = [{
        name: '树谱',
        index: 0,
      },
        {
          name: '册谱',
          index: 1,
        },
        {
          name: '生日',
          index: 2,
        },
      ];
    }
    nextTick(() => {
      uni.$emit(`renewal_${page.dynamicPage}`);
      anniversaries._value.getUserInfo();
      anniversaries._value.getAnniversaryList();
      if (!!sheep.$store('family').perfectInfo && JSON.stringify(sheep.$store('family').perfectInfo) != '{}' && movable.scaleValueAfter == 1) {
        setTimeout(() => {
          nextTick(() => {
            changeWidth();
            uni.$once('singleSearch', (obj) => {
              setTimeout(() => {
                // jumpMember(obj.memberInfo);
                movable.x = 0;
                movable.y = 0;
                uni.$once('singleSearch', (res) => {
                  // console.log(3);
                  setTimeout(() => {
                    // #ifdef MP-WEIXIN
                    movable.x = -res.info.left + sheep.$platform.device
                      .screenWidth / 2;
                    movable.y = -res.info.top + sheep.$platform.device
                      .screenHeight / 2;
                    centralPoint.x = -res.info.left + sheep.$platform.device
                      .screenWidth / 2;
                    centralPoint.y = -res.info.top + sheep.$platform.device
                      .screenHeight / 2;
                    // #endif
                    // #ifndef MP-WEIXIN
                    movable.x = -res.info.left + uni.getSystemInfoSync()
                      .screenWidth / 2;
                    movable.y = -res.info.top + uni.getSystemInfoSync()
                      .screenHeight / 2;
                    centralPoint.x = -res.info.left + uni
                      .getSystemInfoSync().screenWidth / 2;
                    centralPoint.y = -res.info.top + uni.getSystemInfoSync()
                      .screenHeight / 2;
                    // #endif
                    uni.setStorageSync('locationInformation', {
                      x: movable.x,
                      y: movable.y,
                    });
                  }, 100);
                });
                uni.$emit(`memberModule_${obj.memberInfo.id}`);
                if (treeInfo.value.top_list.has_center != 1 && !!page.centerInfo && JSON.stringify(page.centerInfo) != '{}') {
                  // 开启中心点提示
                  centralPointFlag.value = true;
                }
              }, 100);
            });
            uni.$emit(`memberModule_${sheep.$store('family').perfectInfo.id}`);
            sheep.$store('family').addGenealogyTree({});
          });
        }, 1000);
      }
    });

    // if(!page.isFirst){
    //   await getGenealogyTree();
    //   console.log(2);
    // }


    uni.$emit(`generationChange${page.dynamicPage}`);
    // 加载祠堂信息
    await getAncestralHall();
  });

  // #ifdef H5
  function isMobile() {
    const userAgentInfo = navigator.userAgent;
    const mobileAgents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
    const mobileFlag = mobileAgents.some((mobileAgent) => {
      return userAgentInfo.indexOf(mobileAgent) > 0;
    });

    return mobileFlag;
  }

  // #endif
  onUnload(() => {
    sheep.$store('family').hideGenealogyTree();
    uni.removeStorageSync('locationInformation');
    uni.$emit('unload');
    uni.hideLoading();
    page.stopRendering = false;
    sheep.$store('family').setCenterInfo({});
  });

  async function refresh() {
    const isBindGenealogy = await sheep.$api.genealogy.isBindGenealogy({
      genealogy_id: page.options.id,
    });
    isBindGenealogys.value = isBindGenealogy.data;
    await setGenealogyTree(page.options.id, !!page.options.member_id ? page.options.member_id : 0, !!page.options.is_firstScreen ? page.options.is_firstScreen : false, page.options.is_all, page.options.headcount);
    await getGenealogyTree();
  }

  function setTran() {
    // #ifdef MP-WEIXIN
    return !!genealogicalInformation.genealogist && genealogicalInformation.genealogist.length > 0 && !!
      genealogicalInformation.genealogist[0].id ? 'transform: scale(0.5)' : 'transform: scale(0.5)';
    // #endif
    // #ifndef MP-WEIXIN
    return !!genealogicalInformation.genealogist && genealogicalInformation.genealogist.length > 0 && !!
      genealogicalInformation.genealogist[0].id ? 'transform: scale(1)' : 'transform: scale(1)';
    // #endif
  }

  function transmitCoordinate(e) {
    locationInformation.theFirstGeneration = e.top;
    locationInformation.listHeight = e.height;
  }


  function getPageHeight(number) {
    page.headerHeight = number;
  }

  const memberNum = ref(0);

  // 获取家谱信息
  async function getGenealogyTree() {
    if (!!page.is_listen) {
      uni.$off('addAllTree');
    }
    uni.$on('addAllTree', () => {
      page.is_listen = true;
      getGenealogyTree();
    });
    if (JSON.stringify(treeInfo.value) == '{}') {
      await setGenealogyTree(page.options.id, !!page.options.member_id ? page.options.member_id : 0, !!page.options.is_firstScreen ? page.options.is_firstScreen : false, page.options.is_all, page.options.headcount);
    }
    genealogicalInformation.genealogist = [];
    let data = treeInfo.value;
    state.center_id = data.center_id;
    // #ifndef H5
    genealogicalInformation.genealogist = data.list;
    // #endif
    // #ifdef H5
    genealogicalInformation.genealogist.push(data.top_list.data);
    genealogicalInformation.familyMemberInfo.all_count = data.all_count;
    genealogicalInformation.familyMemberInfo.show_die_gray = data.show_die_gray;
    genealogicalInformation.familyMemberInfo.is_simple = data.is_simple;
    genealogicalInformation.familyMemberInfo.male = data.man;
    genealogicalInformation.familyMemberInfo.woman = data.woman;
    genealogicalInformation.familyMemberInfo.code = data.code;
    genealogicalInformation.familyMemberInfo.name = data.name;
    genealogicalInformation.familyMemberInfo.username = data.username || '';
    genealogicalInformation.familyMemberInfo.add_time = data.add_time;
    genealogicalInformation.familyMemberInfo.remark = data.remark;
    genealogicalInformation.familyMemberInfo.is_create = data.is_create;
    genealogicalInformation.familyMemberInfo.is_init = data.is_init;
    genealogicalInformation.familyMemberInfo.center_list = data.center_list;
    // #endif
  }

  async function setGenealogyTree(id, top_id = 0, is_firstScreen = false, is_all = 0, headcount = 0) {
    if (!is_firstScreen) {
      // #ifndef H5
      const { data, code } = await sheep.$api.genealogy.getGenealogyRelationListV3({
        genealogy_id: id,
        top_id,
      });
      // #endif
      // #ifdef H5
      const { data, code } = await sheep.$api.genealogy.getGenealogyTreeListV4({
        genealogy_id: id,
        // #ifdef MP-WEIXIN
        tree_limit: 500,
        // #endif
        // #ifdef APP-PLUS
        tree_limit: 1000,
        // #endif
        // #ifdef H5
        tree_limit: 1500,
        // #endif
        top_id,
      });
      // #endif

      const genealogyV3 = await sheep.$api.genealogy.getGenealogyRelationListV3({
        genealogy_id: id,
        top_id,
      });
      treeInfoV3.value = genealogyV3.data.list;
      treeInfo.value = data;
    } else {
      if (is_all == 0) {
        const { data, code } = await sheep.$api.genealogy.getGenealogyTreeListByCenterId({
          genealogy_id: id,
          // #ifdef MP-WEIXIN
          tree_limit: 500,
          // #endif
          // #ifdef APP-PLUS
          tree_limit: 1000,
          // #endif
          // #ifdef H5
          tree_limit: 1500,
          // #endif
          top_id,
        });
        treeInfo.value = data;
      } else {
        const { data, code } = await sheep.$api.genealogy.getGenealogyTreeListV4({
          genealogy_id: id,
          tree_limit: headcount,
          top_id,
        });
        treeInfo.value = data;
      }
    }
  }

  const addFamilyMemberPopUp = ref();

  // 添加家谱成员
  function clickAdd() {
    addFamilyMemberPopUp._value.openPopup({
      title: '添加家庭成员',
      showTitle: false,
      maskClick: true,
      popupBackground: true,
      isShowConfirm: false,
      showColseButton: false,
    });
  }

  function closeaFamilyMemberPopUp() {
    addFamilyMemberPopUp._value.closePopup();
  }

  // 跳转家谱成员
  function goSetGenealogy(info) {
    uni.$on('addFather', async (res) => {
      treeInfo.value = {};
      await getGenealogyTree();
      changeWidth();
    });
    sheep.$router.go('/pages/genealogy/addRelatives', {
      sex: info.sex,
      img: info.img,
      val: selectInfo.memberInfo.val || -1,
      id: selectInfo.memberInfo.id || '',
      genealogy_id: page.options.id,
    });
    addFamilyMemberPopUp._value.closePopup();
  }

  const addPersonnelPopup = ref();

  async function openAddPersonnelPopup(info) {
    const {
      data,
    } = await sheep.$api.genealogy.getGenealogyPersonal({
      id: info.id,
    });
    popup.addPersonnelInfo = data;
    addPersonnelPopup._value.open();
  }

  const selectPeoplePopupWindowFlag = ref();

  async function addRelation() {
    addPersonnelPopup._value.close();
    sheep.$api.genealogy.checkAddNum({
      genealogy_id: page.options.id,
    }).then(async res => {
      if (res.code == 1001) {
        shareAddPer.value.open();
      } else {
        const {
          data,
        } = await sheep.$api.genealogy.getConfigMember({
          record_id: popup.addPersonnelInfo.id,
        });
        selectInfo.relationshipsThatCanBeAdded = data;
        selectPeoplePopupWindowFlag._value.open();
      }
    });
    return;
  }

  function shiftUp() {
    uni.$off(`setCoordinate${page.dynamicPage}`);
    page.addNotPage = true;
    page.is_add = true;
  }

  async function reset() {
    treeInfo.value = {};
    await getGenealogyTree();
    console.log(2);
    changeWidth();
  }

  function addMember(info) {
    if (info.val == 6 || info.val == -1) {
      uni.$on('addFather', async (res) => {
        treeInfo.value = {};
        await getGenealogyTree();
        changeWidth();
      });
    }
    member.memberInfo = info;
    selectPeoplePopupWindowFlag._value.close();
    uni.$off(`setCoordinate${page.dynamicPage}`);
    page.addNotPage = true;
    page.is_add = true;
    sheep.$router.go('/pages/genealogy/addRelatives', {
      val: member.memberInfo.val,
      genealogy_id: page.options.id,
      id: popup.addPersonnelInfo.id,
      sex: info.sex,
      is_create: genealogicalInformation.familyMemberInfo.is_create,
      is_init: genealogicalInformation.familyMemberInfo.is_init,
      gxval: popup.addPersonnelInfo.gxval,
      name: page.options.name,
      gxname: info.name,
    });
  }

  async function onTabsChange(e) {
    page.current = e;
    if (e == 3) {
      const {
        data,
      } = await sheep.$api.genealogy.addGold();
    }
  }

  // 定位中心点
  const centralPointFun = () => {
    if (treeInfo.value.top_list.has_center == 1) {
      movable.x = 0;
      movable.y = 0;
      setTimeout(() => {
        movable.x = centralPoint.x;
        movable.y = centralPoint.y;
      }, 10);
    } else {
      // 开启中心点提示
      if (!page.options.is_firstScreen) {
        // && !!sheep.$store('family').centerInfo && JSON.stringify(sheep.$store('family').centerInfo) != '{}'
        centralPointFlag.value = true;
      } else {
        movable.x = 0;
        movable.y = 0;
        setTimeout(() => {
          movable.x = centralPoint.x;
          movable.y = centralPoint.y;
        }, 1000);
      }
    }
  };

  // 设为中心点
  async function setCenter(e) {
    state.center_id = e;
  }

  // 获取祠堂信息
  async function getAncestralHall() {
    let {
      data,
    } = await sheep.$api.genealogy.getMemorialTablet({
      genealogy_id: page.options.id,
    });
    commemorate.listOfAncestralTemples = data;
  }

  // 跳转缅怀详情
  async function goToAncestralHall(info) {
    if (!info) {
      sheep.$router.go('/pages/genealogy/famousQuote');
      return;
    }
    let {
      data,
    } = await sheep.$api.genealogy.aliveDetail({
      type: 2,
      alive_id: info.id,
    });
    uni.setStorageSync('aliveDetail', JSON.stringify(data));
    sheep.$router.go('/pages/genealogy/ct_detail', {
      sex: info.sex,
      genealogy_id: page.options.id,
    });
  }

  function goGenealogicalManagement() {
    // 导出
    uni.$on('setExport', () => {
      page.exportOrNot = true;
    });
    sheep.$router.go('/pages/genealogy/genealogicalManagement', {
      id: page.options.id,
    });
  }

  async function exportTree() {
    uni.showLoading({
      title: '正在导出',
      mask: true,
    });
    uni.$on('exportImage', () => {
      page.is_derive = false;
      uni.hideLoading();
    });
    page.is_derive = true;
  }

  function shareFriendsAndFamily() {
    uni.setStorageSync('shareFamilyTreePoster', JSON.stringify({
      id: page.options.id,
      avatar: userInfo.value.avatar.indexOf('http') != -1 ? userInfo.value.avatar : IMG_URL.value +
        userInfo.value.avatar,
      name: genealogicalInformation.familyMemberInfo.name,
      code: genealogicalInformation.familyMemberInfo.code,
      username: genealogicalInformation.familyMemberInfo.username,
      add_time: genealogicalInformation.familyMemberInfo.add_time,
      remark: genealogicalInformation.familyMemberInfo.remark,
    }));
    sheep.$router.go('/pages/genealogy/genealogySharing');
  }

  function changeWidth(flag = false, centralPoint = true) {
    const query = uni.createSelectorQuery().in(proxy);
    query.select('#recursiveList').boundingClientRect(res => {
      if (res) {
        movable.movableViewInfo.width = res.width / movable.scaleValueAfter;
        movable.movableViewInfo.height = res.height / movable.scaleValueAfter;
        console.log('视图的更新=>', '宽度：', movable.movableViewInfo.width, '高度：', movable.movableViewInfo.height, dayjs().format('HH:mm:ss'));
        if (centralPoint) {
          uni.$emit(`acquire${page.dynamicPage}`);
        }
        setTimeout(() => {
          // uni.hideLoading();
          changeWidth(true);
        }, 5000);
      }
    }).exec();
    if (flag) {
      uni.$off(`${page.dynamicPage}`);
    }
  }

  function genealogicalScaling(e) {
    console.log(e);
    if (e.detail.scale == 1) {
      changeWidth();
    }
    movable.scaleValueAfter = e.detail.scale;
    locationInformation.x = e.detail.x;
    locationInformation.y = e.detail.y;

    uni.$emit(`generationChange${page.dynamicPage}`);
  }

  function outerScaling(e) {
    if (e.detail.scale == 1) {
      changeWidth();
    }
    movable.scaleValueAfter = e.detail.scale;
    uni.$emit(`generationChange${page.dynamicPage}`);
  }

  function movableClicks() {

  }

  function movableViewChange(e) {
    locationInformation.x = e.detail.x;
    locationInformation.y = e.detail.y;
    // locationInformation.theFirstGeneration = e.detail.y + 80;
    setTimeout(() => {
      uni.$emit(`generationChange${page.dynamicPage}`);
    }, 10);
    uni.setStorageSync('locationInformation', {
      x: e.detail.x,
      y: e.detail.y,
    });
  }

  const canonizationComponents = ref();

  async function getCanonizationDetail() {
    page.canonizationList = [];
    const {
      data,
    } = await sheep.$api.book_list.index({
      genealogy_id: page.options.id,
      get_content: 1,
    });
    page.canonizationList.push({
      desc: 0,
      hall_num: data.hall_num || '',
      editor: data.editor,
      title: data.title,
      createtime: data.full_year.gregorian_year,
      branch: data.branch,
      cover_image_url: data.cover_image_url,
    });
    page.canonizationBg = data.background_image_url;
    data.pages.forEach(item => {
      page.canonizationList.push(item);
    });
    nextTick(() => {
      // canonizationComponents._value.refresh();
    });
  }

  function closeAddPer() {
    shareAddPer.value.close();
  }

  // #ifndef MP-WEIXIN
  async function appShare() {
    // #ifdef H5
    page.showShareGuide = true;
    const {
      data,
    } = await sheep.$api.genealogy.addGenealogyShare({
      genealogy_id: page.options.id,
    });
    // #endif

    // #ifdef APP-PLUS
    uni.$on('appShareMange', async () => {
      sheep.$helper.toast('分享成功');
      const {
        data,
      } = await sheep.$api.genealogy.addGenealogyShare({
        genealogy_id: page.options.id,
      });
      closeAddPer();
    });
    sheep.$platform.share.shareAPP({
      title: '拾亲',
      desc: '再小的家庭-也要有传承',
      link: `pages/message/genealogy?id=${userInfo.value.uid}&type=2&f=1&spid=${userInfo.value.uid}&gd=${page.options.id}`,
      image: `${h5_url}/static/shiqin_transparent_icon.png`,
      resolve: 'appShareMange',
    });
    // #endif
  }

  // #endif

  // #ifdef H5
  // 处理wheel事件
  function handleWheel(event) {
    if (page.ctrlKeyDown) {
      // 在这里处理Ctrl + 鼠标滚轮的逻辑
      console.log('Ctrl + 鼠标滚轮操作');
      // 你的逻辑代码

      // 可选：阻止默认的滚动行为
      event.preventDefault();
    }
  }

  // #endif

  // #ifdef MP-WEIXIN
  onShareAppMessage(async (res) => {
    if (res.from == 'button') {
      closeAddPer();
      const {
        data,
      } = await sheep.$api.genealogy.addGenealogyShare({
        genealogy_id: page.options.id,
      });
    }
    return {
      title: `${userInfo.value.nickname}邀请您加入${page.options.name},男丁${genealogicalInformation.familyMemberInfo.male}人,女丁${genealogicalInformation.familyMemberInfo.woman}人,共${genealogicalInformation.familyMemberInfo.all_count}个家谱成员。`,
      // desc: '再小的家庭-也要有传承',
      path: `/pages/message/genealogy?id=${userInfo.value.uid}&type=2&f=1&spid=${userInfo.value.uid}&gd=${page.options.id}`,
    };
  });

  // #endif

  async function purchaseMembership() {
    let obj = {};
    let arr = [];
    arr.push({
      goods_id: vipDisposition.goodDetails.id,
      goods_num: 1,
      goods_sku_price_id: vipDisposition.goodDetails.id,
    });
    obj.goods_list = arr;
    obj.is_from = 1;
    obj.order_type = 'goods';
    const {
      code,
      data,
    } = await sheep.$api.order.create(obj);
    // #ifdef APP-PLUS
    if (sheep.$platform.device.platform.toLocaleLowerCase() == 'ios' && mp_code.value == appVersion.value) {
      plus.payment.getChannels(async function(channels) {
          for (let i in channels) {
            let channel = channels[i];
            // 获取 id 为 'appleiap' 的 channel
            if (channel.id == 'appleiap') {
              const data1 = await sheep.$api.order.detail(data.order_sn);
              channel.requestOrder(['io.shiqin.app.com_Member_oneYear'], (res) => {
                applePay(res[0], data.order_sn);
              }, (err) => {
                console.log('内购失败=>', err);
              });
            }
          }
        },
        function(e) {
          sheep.$helper.toast('获取iap支付通道失败：' + e.message);
        });
      return;
    }
    // #endif
    sheep.$router.go('/pages/pay/index', {
      orderSN: data.order_sn,
      flag: 1,
    });
  }

  function exchangeImmediately() {
    sheep.$router.go('/pages/vip/memberCenter');
  }

  function closePopup() {
    vipDisposition.isShow = false;
  }

  function openVip() {
    vipDisposition.isShow = true;
  }

  function liberalVip() {
    closeAddPer();
    vipDisposition.isShow = true;
  }

  function movableClick() {
  }

  // #ifdef APP-PLUS
  function applePay(order, order_id) {
    uni.showLoading({
      title: '充值中请勿离开',
      mask: true,
    });
    uni.requestPayment({
      provider: 'appleiap',
      orderInfo: {
        productid: order.productid,
      },
      success: (async res => {
        uni.hideLoading();
        const {
          code,
          msg,
        } = await sheep.$api.user.applePay({
          order_id,
          transactionReceipt: res.transactionReceipt,
          transactionIdentifier: res.transactionIdentifier,
        });
        if (code == 1) {
          uni.showModal({
            content: '支付成功',
            showCancel: false,
          });
          vipDisposition.isShow = false;
          sheep.$store('user').updateUserData();
        } else {
          uni.showModal({
            content: '支付失败',
            showCancel: false,
          });
        }
      }),
      fail: (e) => {
        uni.hideLoading();
        uni.showModal({
          content: '支付失败',
          showCancel: false,
        });
      },
    });
  }

  onBackPress((options) => {
    // 点击虚拟键或者侧滑的时候触发（不允许返回）
    if (options.from === 'backbutton') {
      return true;
    }
    // 否则则允许返回
    return false;
  });

  // #endif

  // 关闭搜索弹窗
  function closeSearchPopup() {
    searchPopup.value = false;
    searchValue.value = '';
  }

  // 搜索成员
  async function searchMember() {
    if (!!searchValue.value) {
      searchList.value = [];
      const { data } = await sheep.$api.genealogy.searchGenealogyRelation({
        name: searchValue.value,
        genealogy_id: page.options.id,
      });
      data.forEach(item => {
        searchList.value.push(item);
      });
    } else {
      closeSearchPopup();
    }
  }

  // 成员跳转
  function jumpMember(item) {
    if (page.treeList.has(item.id)) {
      let info = page.treeList.get(item.id);
      movable.x = 0;
      movable.y = 0;
      uni.$once('singleSearch', (res) => {
        console.log(res);
        setTimeout(() => {
          // #ifdef MP-WEIXIN
          movable.x = -res.info.left + sheep.$platform.device
            .screenWidth / 2;
          movable.y = -res.info.top + sheep.$platform.device
            .screenHeight / 2;
          centralPoint.x = -res.info.left + sheep.$platform.device
            .screenWidth / 2;
          centralPoint.y = -res.info.top + sheep.$platform.device
            .screenHeight / 2;
          // #endif
          // #ifndef MP-WEIXIN
          console.log(uni.getSystemInfoSync()
            .screenWidth);
          movable.x = (-res.info.left + uni.getSystemInfoSync()
            .screenWidth / 2) / movable.scaleValueAfter;
          movable.y = (-res.info.top + uni.getSystemInfoSync()
            .screenHeight / 2) / movable.scaleValueAfter;
          centralPoint.x = (-res.info.left + uni
            .getSystemInfoSync().screenWidth / 2) / movable.scaleValueAfter;
          centralPoint.y = (-res.info.top + uni.getSystemInfoSync()
            .screenHeight / 2) / movable.scaleValueAfter;
          // #endif
          console.log(movable.x, movable.y);
          uni.setStorageSync('locationInformation', {
            x: movable.x,
            y: movable.y,
          });
        }, 100);
      });
      uni.$emit(`memberModule_${info.id}`);
      closeSearchPopup();
    } else {
      // #ifdef H5
      window.open(`${window.location.href.split('#')[0]}#/pages/genealogy/management?id=${page.options.id}&name=${page.options.name}-${!!item.surname ? item.surname : ''}${!!item.name ? item.name : ''}节点&add_time=${page.options.add_time}&username=${page.options.username}&is_firstScreen=true&member_id=${item.id}&dynamicPage=${page.dynamicPage + 1}`);
      // #endif
      // #ifndef H5
      sheep.$router.go('/pages/genealogy/management', {
        id: page.options.id,
        name: `${page.options.name}-${!!item.surname ? item.surname : ''}${!!item.name ? item.name : ''}节点`,
        add_time: page.options.add_time,
        username: page.options.username,
        is_firstScreen: true,
        member_id: item.id,
        dynamicPage: page.dynamicPage + 1,
      });
      // #endif
    }
    closeSearchPopup();
    closeCentralPointFlag();
  }

  function closeCentralPointFlag() {
    console.log(centralPointFlag.value);
    centralPointFlag.value = false;
  }

  // 查看全部
  function viewAll() {
    // #ifdef H5
    window.open(`${window.location.href.split('#')[0]}#/pages/genealogy/management?id=${page.options.id}&name=${page.options.name}&add_time=${page.options.add_time}&username=${page.options.username}&is_firstScreen=true&is_all=1&headcount=${genealogicalInformation.familyMemberInfo.all_count}`);
    // #endif
    // #ifndef H5
    sheep.$router.go('/pages/genealogy/management', {
      id: page.options.id,
      name: page.options.name,
      add_time: page.options.add_time,
      username: page.options.username,
      is_firstScreen: true,
      is_all: 1,
      headcount: genealogicalInformation.familyMemberInfo.all_count,
      is_confirm: true,
    });
    // #endif
  }

  // 手机模式下的跳转页面
  function phoneJump(item) {
    sheep.$router.go('/pages/genealogy/management', {
      id: page.options.id,
      name: `${page.options.name}-${item.surname + item.name}节点`,
      add_time: page.options.add_time,
      username: page.options.username,
      is_firstScreen: true,
      member_id: item.id,
      dynamicPage: page.dynamicPage + 1,
    });
  }
</script>


<style scoped lang="scss">
  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;
      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .genealogicalDetails_avatarList {
    .genealogicalDetails_avatarList_list {
      width: 128rpx;
      height: 223rpx;
      background: #6FA0FC;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;

        .images {
          width: 128rpx;
          height: 128rpx;
        }
      }

      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #FFFFFF;
      }
    }
  }

  .familyMemberPopUp_close {
    width: 362rpx;
    height: 80rpx;
    border-radius: 41rpx 41rpx 41rpx 41rpx;
    border: 2rpx solid #FF4206;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FF4206;
  }

  .genealogicalDetails_bottom {
    position: fixed;
    bottom: 0;
    height: 100rpx;
    //border-top: 2rpx solid #E5E5E5;
    background: #FFFFFF;
  }

  .suTabs {
    ::v-deep .u-tabs {
      border: none !important;
    }
  }

  .canonization {
    width: 750rpx;
    height: 100vh;
    position: fixed;
    overflow: hidden;

    .canonization_image {
      width: 100%;
      height: 100%;
    }

    .username {
      position: absolute;
      right: 426rpx;
      top: 640rpx;
      width: 27rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 27rpx;
      color: #42403C;
    }

    .name {
      position: absolute;
      right: 250rpx;
      top: 240rpx;
      width: 103rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 103rpx;
      color: #42403C;
    }

    .time {
      position: absolute;
      right: 154rpx;
      top: 530rpx;
      width: 27rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 27rpx;
      color: #42403C;
    }
  }

  .ancestralHall {
    width: 750rpx;
    height: 100vh;
    position: fixed;
    background: url($uni-bg-url-sq + "/index/citang.jpg") no-repeat;
    background-size: 100% 100%;

    .ancestralHall_scrollView {
      position: absolute;
      width: 470rpx;
      height: 580rpx;
      background: transparent;
      top: 350rpx;
      left: 50%;
      transform: translateX(-50%);

      .all {
        width: 470rpx;

        .ancestralHall_column {
          width: 470rpx;

          .ancestralHall_row {
            position: relative;

            image {
              width: 57rpx;
              height: 131rpx;
            }

            .ancestralHall_row_name {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -72%);
              width: 16rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
              line-height: 18rpx;
            }
          }
        }
      }
    }
  }

  .management {
    position: fixed;
    left: 12rpx;
    bottom: 108rpx;

    .managementTitle {
      width: 143rpx;
      height: 50rpx;
      background: #FF4206;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
    }

    .managementNum {
      height: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #9F9F9F;
    }
  }


  .managementRight {
    position: fixed;
    right: 12rpx;
    bottom: 108rpx;

    .managementTitle {
      width: 143rpx;
      height: 50rpx;
      background: #FF4206;
      border-radius: 36rpx 36rpx 36rpx 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
    }

    .managementNum {
      height: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #9F9F9F;
    }
  }

  .activeStyle {
    background: rgb(255, 66, 6);
    color: #FFFFFF;
    font-size: 36rpx;
    font-weight: bold;
    padding: 2rpx 17rpx;
    border-radius: 36rpx;
  }

  .inactiveStyle {
    color: #4B4B4B;
    font-size: 36rpx;
    font-weight: bold;
    padding: 2rpx 17rpx;
    border-radius: 36rpx;
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */

  .memberPopup {
    width: 750rpx;
    height: 789rpx;

    .exchange {
      width: 325rpx;
      position: absolute;
      right: 215rpx;
      top: 154rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 28rpx;
      color: #E94F09;
      padding: 0 0 5rpx 0;
    }
  }

  .button_vip {
    position: absolute;
    left: 50%;
    bottom: 110rpx;
    transform: translate(-50%, 0);
    width: 269rpx;
    height: 82rpx;
    background: url($uni-bg-url + '/nc_vip_button.png') no-repeat;
    background-size: 269rpx 82rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 41rpx;
    color: #FF4206;
  }

  .chatDetail {
    position: absolute;
    left: 50%;
    bottom: 270rpx;
    transform: translate(-50%, 0);
  }

  .shareAddPer {
    background: url($uni-bg-url-sq + '/index/people_vip_popup.png') no-repeat;
    background-size: 661rpx 734rpx;
  }

  .people_vip_popup_padding {
    background: url($uni-bg-url-sq + '/index/people_vip_popup_padding.png') no-repeat;
    background-size: 680rpx 354rpx;
  }

  .hidden_all {
    animation: hide-gradient .5s linear;
    animation-fill-mode: forwards; //  动画停留在最后一刻，也就是隐藏
  }

  @keyframes hide-gradient {
    from {
      bottom: 0;
    }

    to {
      bottom: -100%;
    }
  }

  .show_all {
    animation: show-gradient .5s linear;
    animation-fill-mode: forwards; //  动画停留在最后一刻，也就是隐藏
  }

  @keyframes show-gradient {
    from {
      bottom: -100%;
    }

    to {
      bottom: 0;
    }
  }

  .hidden_header {
    position: fixed;
    animation: hide-header .5s linear;
    animation-fill-mode: forwards; //  动画停留在最后一刻，也就是隐藏
  }

  @keyframes hide-header {
    from {
      top: 0;
    }

    to {
      top: -100%;
    }
  }

  .show_header {
    animation: show-header .5s linear;
    animation-fill-mode: forwards; //  动画停留在最后一刻，也就是隐藏
  }

  @keyframes show-header {
    from {
      top: -100%;
    }

    to {
      top: 0;
    }
  }

  .shidai_list {
    background: url($uni-bg-url-sq + "/index/genealogy_left_icon.png") no-repeat;
    background-size: 100% 100%;
  }

  .search_hover:hover {
    background: #a7c8fb !important;
  }
</style>